<template>
	<view class="deposit">
		<view class="padding-top-sm padding-bottom-sm w-bj-white margin-top-xs checkBoxItem">
			<view class="padding-left-sm">
				<view class="text-sml">
					<span class="text-bold-lg">取款方式</span>
				</view>
			</view>

			<view class="margin-top-xs">
				<view class="van-grid" style="padding-left: 0.8rem">
					<view class="van-grid-item" style="flex-basis: 33.3333%; padding-right: 0.8rem"
						@click="setIndex(index,item.value)" v-for="(item, index) in list" :key="index"
						:class="{ active: activeIndex === index }">
						<view
							class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<image class="icon" :src="item.icon" mode="widthFix"></image>
							<span class="van-grid-item__text">{{ item.title }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-top-sm padding-bottom-sm w-bj-white margin-top-xs checkBoxItem">
			<form action="" class="van-form">
				<view class="padding-top-sm padding-bottom-sm w-bj-white margin-top-xs withdrawItem">
					<view class="van-cell-group van-cell-group--inset">
						<view class="van-cell van-field">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">取款金额</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.amoney"
										class="van-field__control" placeholder="请输入取款金额" />
								</view>
							</view>
						</view>

						<view class="van-cell van-field" v-if="pay_type == 1">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">开户银行</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.bank_name"
										class="van-field__control" placeholder="请输入开户银行" />
								</view>
							</view>
						</view>

						<view class="van-cell van-field" v-if="pay_type == 1">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">银行卡号</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.bank_number"
										class="van-field__control" placeholder="请输入银行卡号" />
								</view>
							</view>
						</view>

						<view class="van-cell van-field" v-if="pay_type == 1">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">开户人姓名</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.bank_username"
										class="van-field__control" placeholder="请输入开户人姓名" />
								</view>
							</view>
						</view>

						<view class="van-cell van-field" v-if="pay_type == 2">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">支付宝账号</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.alipay_number"
										class="van-field__control" placeholder="请输入支付宝账号" />
								</view>
							</view>
						</view>
						<view class="van-cell van-field" v-if="pay_type ==2">
							<view class="van-cell__title van-field__label">
								<label id="van-field-27-label" for="van-field-27-label">支付宝姓名</label>
							</view>
							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input id="van-field-27-input" type="text" v-model="form.alipay_username"
										class="van-field__control" placeholder="请输入支付宝姓名" />
								</view>
							</view>
						</view>
            <view class="van-cell van-field" v-if="pay_type ==3">
              <view class="van-cell__title van-field__label">
                <label id="van-field-27-label" for="van-field-27-label">微信昵称</label>
              </view>
              <view class="van-cell__value van-field__value">
                <view class="van-field__body">
                  <input id="van-field-27-input" type="text" v-model="form.wechat_username"
                         class="van-field__control" placeholder="请输入微信昵称" />
                </view>
              </view>
            </view>
            <view class="van-cell van-field" v-if="pay_type ==2">
              <view class="van-cell__title van-field__label">
                <label id="van-field-27-label" for="van-field-27-label">支付宝收款码</label>
              </view>
              <view class="van-cell__value van-field__value">
                <view class="">
                  <image :src="alipay_payment_code" @click="choose_image()" class="addImages"  v-if="alipay_payment_code"></image>
                  <span v-else class="addImages"@click="choose_image()"  >+</span>
                </view>
              </view>
            </view>
            <view class="van-cell van-field" v-if="pay_type ==3">
              <view class="van-cell__title van-field__label">
                <label id="van-field-27-label" for="van-field-27-label">微信收款码</label>
              </view>
              <view class="van-cell__value van-field__value">
                <view class="">
                  <image :src="wechat_payment_code" @click="choose_image()" class="addImages"  v-if="wechat_payment_code"></image>
                  <span v-else class="addImages"@click="choose_image()"  >+</span>
                </view>
              </view>
            </view>
					</view>
				</view>
			</form>
		</view>

		<view class="padding-sm">
			<button :disabled="!form.amoney || loading" class="van-button van-button--primary van-button--normal van-button--block"
				:class="{ 'van-button--disabled': !form.amoney }" @click="submitForm()">
				<view class="van-button__content">
					<span class="van-button__text">确定</span>
				</view>
			</button>

<!--			<view class="padding-top-sm text-center">-->
<!--				遇到问题？联系-->
<!--				<span class="text-color-blue" @click="toIm()">在线客服</span> 解决-->
<!--			</view>-->
		</view>
	</view>
</template>

<script>
	import icon1 from "../../../static/index/yhk.png";
	import icon2 from "../../../static/index/wx.png";
	import icon3 from "../../../static/index/zfb.png";
	import icon4 from "../../../static/index/JD.png";
	import $H from '@/pages/common/request.js'
  import $C from '@/pages/common/config.js';
	export default {
		props: {
			price: {
				type: String || Number,
				default: null
			},
      wallteData:{
        type: Object,
        default: () => {}
      },
      config:{
        type: Object,
        default: () => {}
      },
      userInfo:{
        type: Object,
        default: () => {}
      }
		},
		data() {
			return {
				list: [{
						title: "银行卡转账",
            value:1,
						icon: icon1,
					},
					{
						title: "支付宝",
            value:2,
						icon: icon3,
					},
          {
            title: "微信",
            value:3,
            icon: icon2,
          },
				],
				activeIndex: 0,
				form: {
					bank_name: this.wallteData.yhk.bank_name, // 开户银行
					bank_number: this.wallteData.yhk.bank_number, // 银行卡号
					bank_username: this.wallteData.yhk.bank_username, // 开户人姓名
					amoney: null,
					alipay_number: this.wallteData.zfb.bank_number,
					alipay_username: this.wallteData.zfb.bank_username,
          wechat_username: this.wallteData.wx.bank_username,
          withdrawal_type:1,
          alipay_payment_code:this.wallteData.zfb.alipay_payment_code,
          wechat_payment_code:this.wallteData.wx.wechat_payment_code,
				},
				priceList: [100, 200, 50],
        loading:false,
        pay_type:1,
        alipay_payment_code:this.wallteData.zfb.alipay_payment_code,
        wechat_payment_code:this.wallteData.wx.wechat_payment_code,

			};
		},
    computed:{
      list(){
        if(this.config.withdrawal_bank_open != 1){
          return this.list.filter(item => item.value != 1)
        }else if(this.config.withdrawal_alipay_open != 1){
          return this.list.filter(item => item.value != 2)
        }else if(this.config.withdrawal_wechat_open != 1){
          return this.list.filter(item => item.value != 3)
        }
        return this.list
      }
    },
		methods: {

			toIm() {
				uni.switchTab({
					url: "/pages/im/imdetails",
				});
			},
			
			clearForm(){
				this.form = {
					bank_name: null, // 开户银行
					bank_number: null, // 银行卡号
					bank_username: null, // 开户人姓名
					amoney: null,
          payment_code:'',
          type:1,
					alipay_number: null,
					alipay_username: null,
				}
			},
			
			setIndex(index,value){
				this.activeIndex = index
				this.pay_type = value;
        console.log(this.pay_type,'pay_type')
			},

      choose_image(sourceType = 'album') {
        const that = this;
        uni.chooseImage({
          count: 9,
          sizeType: ['compressed'],
          success: (res) => {
            console.log(res)
            uni.showLoading({})
            res.tempFilePaths.map((item, index) => {
              uni.uploadFile({
                url: $C.baseUrl + '/admin_image_upload?name=code',
                // url: this.HTTP_URL +'/admin/api.upload/state',
                filePath: item,
                name: 'image',
                header: {
                  'token': that.userInfo.token
                },
                success: (uploadRes) => {
                  uni.hideLoading()
                  uploadRes = JSON.parse(uploadRes.data);
                  console.log(uploadRes)
                  if (uploadRes.code !== 200) {
                    uni.showToast({
                      title: uploadRes.msg || '上传错误',
                      duration: 1000,
                      icon: 'none'
                    });
                    return
                  }else{
                    if(that.pay_type == 2){
                      that.form.alipay_payment_code = uploadRes.data.imgurl;
                      that.alipay_payment_code = that.config.app_host+uploadRes.data.imgurl;
                    }else{
                      that.form.wechat_payment_code = uploadRes.data.imgurl;
                      that.wechat_payment_code = that.config.app_host+uploadRes.data.imgurl;
                    }

                  }

                },
                fail: (err) => {
                  alert(JSON.stringify(err))
                  uni.hideLoading()
                }
              });
            })
          }
        });
      },

			submitForm() {

				if (!this.price) {
					return uni.showToast({
						title: '余额不足',
						duration: 1000,
						icon: 'none'
					});
				}
				const {
					bank_name,
					bank_number,
					bank_username,
					amoney,
          withdrawal_type,
					alipay_number,
					alipay_username,
          wechat_username,

				} = this.form;
				let postData = {};
				let yhkData = {
					bank_name,
					bank_number,
					bank_username,
					amoney,
          withdrawal_type:1,
					type: 'take',
				}
				
				let zfbData = {
					bank_name:'支付宝',
					amoney,
          withdrawal_type:2,
					bank_number:alipay_number,
					bank_username:alipay_username,

					type: 'take',
				}

        let wxData = {
          bank_name:'微信',
          amoney,
          withdrawal_type:3,
          bank_username:wechat_username,

          type: 'take',
        }

				if(this.pay_type == 1) {
          // if(this.wallteData.yhk.bank_username && yhkData.bank_username!=this.wallteData.yhk.bank_username){
          //   return uni.showToast({
          //     title: '当前下分用户取款名姓名与上次姓名不一致，请认真核实此次下分订单的是否由本人操作下分，避免造成损失！',
          //     duration: 1000,
          //     icon: 'none'
          //   });
          //   return ;
          // }
					for(let i in yhkData) {
						if(!yhkData[i]) {
							return uni.showToast({
								title: '请将数据填写完整',
								duration: 1000,
								icon: 'none'
							});
						}
					}
          postData = yhkData
				}
				
				if(this.pay_type == 2) {
          // if(this.wallteData.zfb.bank_username && zfbData.bank_username!=this.wallteData.zfb.bank_username){
          //   return uni.showToast({
          //     title: '当前下分用户取款名姓名与上次姓名不一致，请认真核实此次下分订单的是否由本人操作下分，避免造成损失！',
          //     duration: 1000,
          //     icon: 'none'
          //   });
          //   return ;
          // }
					for(let i in zfbData) {
						if(!zfbData[i]) {
							return uni.showToast({
								title: '请将数据填写完整',
								duration: 1000,
								icon: 'none'
							});
						}
					}
          zfbData['alipay_payment_code']= this.form.alipay_payment_code
          postData = zfbData
				}
        if(this.pay_type == 3) {
          // if(this.wallteData.zfb.bank_username && zfbData.bank_username!=this.wallteData.zfb.bank_username){
          //   return uni.showToast({
          //     title: '当前下分用户取款名姓名与上次姓名不一致，请认真核实此次下分订单的是否由本人操作下分，避免造成损失！',
          //     duration: 1000,
          //     icon: 'none'
          //   });
          //   return ;
          // }
          for(let i in wxData) {
            if(!wxData[i]) {
              return uni.showToast({
                title: '请将数据填写完整',
                duration: 1000,
                icon: 'none'
              });
            }
          }
          wxData['wechat_payment_code']= this.form.wechat_payment_code
          postData = wxData

        }
				// if(this.type == 'bank'){
				// 	uni.setStorageSync('bank_name', this.bank_name)
				// 	uni.setStorageSync('bank_number', this.bank_number)
				// 	uni.setStorageSync('bank_username', this.bank_username)
				// }
				// if(this.type == 'alipay'){
				// 	uni.setStorageSync('alipay_number', this.alipay_number)
				// 	uni.setStorageSync('alipay_username', this.alipay_username)
				// }

        this.loading = true;
				$H.post('/app_user_wallet', postData).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.$emit('submit')
					}
          this.loading = false;
					if (res.msg) {
						return uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.van-grid {
		.van-grid-item {
			margin-bottom: 0.8rem;

			.van-grid-item__content {
				display: flex;
				padding: 2.13333vw 0;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				height: 100%;
				background-color: #fff;
				border-radius: 20rpx;

				.icon {
					width: 44rpx;
					margin-right: 10rpx;
				}
			}
		}

		.active {
			.van-grid-item__content {
				border: 1px solid #f4af00;
			}
		}
	}

	.van-cell-group--inset {
		margin: 2.13333vw;
		border-radius: 2.13333vw;
		overflow: hidden;
	}

	.van-cell-group {
		background: #fff;
	}

	.van-cell {
		line-height: 8vw;
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 2.66667vw 4.26667vw;
		overflow: hidden;
		color: #323233;
		font-size: 3.73333vw;
		background: #fff;

		.van-field__label {
			flex: none;
			box-sizing: border-box;
			width: 6.2em;
			margin-right: 3.2vw;
			color: #323233;
			text-align: left;
			word-wrap: break-word;
		}

		.van-field__value {
			overflow: visible;
		}

		.van-cell__value {
			position: relative;
			overflow: hidden;
			color: #969799;
			text-align: right;
			vertical-align: middle;
			word-wrap: break-word;
			display: flex;

			.van-field__body {
				display: flex;
				align-items: center;

				.van-field__control {
					display: block;
					box-sizing: border-box;
					width: 100%;
					min-width: 0;
					margin: 0;
					padding: 0;
					color: #323233;
					line-height: inherit;
					text-align: left;
					background-color: transparent;
					border: 0;
					resize: none;
					-webkit-user-select: auto;
					user-select: auto;
				}
			}
		}
	}

	.van-field {
		flex-wrap: wrap;
	}
  .addImages{
    width:180rpx;
    height:180rpx;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #ccc;
  }
</style>